<template>
    <div class="dd-lang-dialog">
        <div class="dd-lang-container">
            <div class="dd-lang-row dd-lang-row-head">
                <div class="dd-lang-col">{{ i18n('lang', '语言') }}</div>
                <div class="dd-lang-col dd-lang-col-value">{{ i18n('langText', '语言文本') }}</div>
                <div class="dd-lang-col">{{ i18n('langId', '语言标识') }}</div>
            </div>
            <div v-for="(item,index) of language" :key="index" class="dd-lang-row dd-lang-row-list">
                <div class="dd-lang-col">
                    <span>{{ item.label }}</span>
                </div>
                <div class="dd-lang-col dd-lang-col-value">
                    <a-input v-model:value="languageData[item.key]"></a-input>
                </div>
                <div class="dd-lang-col">{{ item.key }}</div>
            </div>
        </div>
        <div class="dd-lang-toolbar">
            <a-button @click="ok" type="primary" style="margin-right: 8px;">{{ i18n('confirm', '确认') }}</a-button>
            <a-button @click="cancel">{{ i18n('cancel', '取消') }}</a-button>
        </div>
    </div>
</template>

<script>
import {Util} from '@lowcode/jpaas-base-lib';
import {cloneDeep} from 'lodash-es'

export default {
    name: "LangInputDialog",
    props: {
        langData: {},
        destroy: {}
    },
    data() {
        return {
            language: [
                {label: this.i18n('Chinese', '中文'), key: 'zh-CN', value: ''},
                {label: this.i18n('English', 'English'), key: 'en-US', value: ''},
                {label: this.i18n('Japanese', '日本語'), key: 'ja-JP', value: ''},
                {label: this.i18n('Spanish', '西班牙语'), key: 'es-ES', value: ''},
            ],
            languageData: {}
        }
    },
    created() {
        this.languageData = cloneDeep(this.langData);
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "langInputLang", key);
        },
        ok() {
            Util.closeWindow(this, 'ok', this.languageData)
        },
        cancel() {
            Util.closeWindow(this)
        }
    }
}
</script>

<style scoped>
.dd-lang-toolbar {
    text-align: center;
}

.dd-lang-dialog {
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dd-lang-container {
    border: 1px solid #ddd;
}

.dd-lang-row-head {
    border-bottom: 1px solid #ddd;
}

.dd-lang-row {
    min-height: 30px;
    display: flex;
    border-bottom: 1px solid #ddd;
}

.dd-lang-row:last-child {
    border-bottom: none;
}

.dd-lang-col {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 4px 10px;
    border-right: 1px solid #ddd;
}

.dd-lang-col-value {
    flex: 2;
}
</style>
